<!-- 刷题与闯关 主页 -->
<template>
    <div style="width: 100%;" v-loading="loading">
        <div>
            <el-row :gutter="12">
                <el-col :xs="24" :sm="12" :lg="6">
                    <el-card shadow="hover" class="cardonw">
                        今日刷题量: <count-to :startVal="0" :endVal="datas.limitTimeRepeatQueCount" :duration="3000"></count-to>
                        <el-divider />
                        历史刷题量: <count-to :startVal="0" :endVal="datas.totalRepeatQueCount" :duration="3000"></count-to>
                    </el-card>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="6">
                    <div>
                        <el-card shadow="hover" class="cardonw2">
                            今天完成任务: <count-to :startVal="0" :endVal="datas.limitTimeCompleteTaskCount"
                                :duration="3000"></count-to>
                            <el-divider />
                            历史完成任务: <count-to :startVal="0" :endVal="datas.totalCompleteTaskCount"
                                :duration="3000"></count-to>
                        </el-card>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="6">
                    <div>
                        <el-card shadow="hover" class="cardonw3">
                            任务完成率: <count-to :startVal="0" :endVal="(datas.totalTaskPercent)" :duration="3000"></count-to>%
                            <el-divider />
                            按排任务数: <count-to :startVal="0" :endVal="datas.totalTaskUserCount" :duration="3000"></count-to>
                        </el-card>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="12" :lg="6">
                    <div>
                        <el-card shadow="hover" class="cardonw4">
                            总刷题人数:<count-to :startVal="0" :endVal="datas.totalRepeatPeopleCount"
                                :duration="3000"></count-to>
                            <el-divider />
                            今日刷题人数: <count-to :startVal="0" :endVal="datas.limitTimeRepeatPeopleCount"
                                :duration="3000"></count-to>
                        </el-card>
                    </div>
                </el-col>
            </el-row>
        </div>
        <!-- 柱状图 -->
        <el-row style="margin-top: 20px;" gutter="40">
            <el-col :span="12">
                <div class="card-header">
                    <span>最近七天刷题数据</span>
                </div>
                <div id="main" class="cardtwodiv"></div>
            </el-col>
            <el-col :span="12">
                <div class="card-header">
                    <span>最近七天来源数据</span>
                </div>
                <div id="main1" class="cardtwodiv2"></div>
            </el-col>
        </el-row>
        <div id="k1">
            <div>
            <el-row>
                <el-col :span="12">
                    <el-radio-group v-model="days" size="large" @change="sjgb">
                        <el-radio-button :label="1">
                            前天
                        </el-radio-button>
                        <el-radio-button :label="2">
                            昨天
                        </el-radio-button>
                        <el-radio-button :label="3">
                            今天
                        </el-radio-button>
                        <el-radio-button :label="4">
                            本周
                        </el-radio-button>
                        <el-radio-button :label="5">
                            上周
                        </el-radio-button>
                        <el-radio-button :label="6">
                            本月
                        </el-radio-button>
                        <el-radio-button :label="7">
                            上月
                        </el-radio-button>
                        <el-radio-button :label="-1">
                            自定义
                        </el-radio-button>
                    </el-radio-group>
                </el-col>
                <el-col :span="12" >
                    <el-date-picker v-model="time" @change="changesj" type="daterange" range-separator="至"
                        start-placeholder="开始时间" end-placeholder="结束时间" />
                </el-col>
            </el-row>
        </div>
        </div>
        <div class="xian">
            <span class="txt">刷题排行榜</span>
        </div>
        <div style="margin-top:20px;height: 40vh;" v-loading="loadingshow">
            <el-table row-key="id" height="40vh" :data="sttableData" ref="myTable" style="width: 100%; text-align: center">
                <el-table-column prop="id" v-if="false" label="编号" width="" />
                <el-table-column type="index" label="排名" align="center" width="80" />
                <el-table-column prop="name" label="姓名" align="center" show-overflow-tooltip />
                <el-table-column prop="orgName" label="组织" align="center" />
                <el-table-column prop="count" label="刷题数" align="center" show-overflow-tooltip />
                <el-table-column prop="rightCount" label="正确数量" align="center" show-overflow-tooltip />
                <el-table-column prop="percent" label="正确率" align="center" show-overflow-tooltip>
                    <template #default="scope">
                        <el-tag type="success">{{ scope.row.percent }}%</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <el-button size="small" type="primary" @click="detail" plain>详情
                    </el-button>
                </el-table-column>
            </el-table>
        </div>
        <div class="xian">
            <span class="txt">任务排行榜</span>
        </div>
        <div style="margin-top:20px;height: 40vh;" v-loading="loadingshow">
            <el-table row-key="id" height="40vh" :data="rwtableData" ref="myTable" style="width: 100%; text-align: center">
                <el-table-column prop="id" v-if="false" label="编号" width="" />
                <el-table-column type="index" label="排名" align="center" width="80" />
                <el-table-column prop="name" label="姓名" align="center" show-overflow-tooltip />
                <el-table-column prop="orgName" label="组织" align="center" />
                <el-table-column prop="completedCount" label="完成数" align="center" show-overflow-tooltip />
                <el-table-column prop="totalCount" label="总数" align="center" show-overflow-tooltip />
                <el-table-column prop="percent" label="完成率" align="center">
                    <template #default="scope">
                        <el-tag type="success">{{ scope.row.percent }}%</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="queTotalCount" label="题目" align="center" />
                <el-table-column prop="queRightCount" label="正确数" align="center" />
                <el-table-column prop="queRightPercent" label="正确率" align="center" show-overflow-tooltip>
                    <template #default="scope">
                        <el-tag type="info">{{ scope.row.queRightPercent }}%</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="totalTime" label="时长" align="center" />
                <el-table-column label="操作">
                    <el-button size="small" type="primary" plain>详情
                    </el-button>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, reactive, toRefs } from 'vue'
import * as echarts from 'echarts';
import { GetStatistics, UpdateTaskFilishCount, GetLimitRepeatTop, GetLimitTaskTop } from '../../api/practice/index';
import { CountTo } from 'vue3-count-to';
export default defineComponent({
    components: {
        CountTo
    },
    setup() {
        onMounted(() => {
            event.getdata();
            event.getstdata(data.type, data.beginTime, data.endTime);
            event.getrwdata(data.type, data.beginTime, data.endTime)
        })

        const data = reactive({
            days: 3,//天数选择
            time: [],
            datas: {
                limitTimeRepeatQueCount: 0,//今日刷题量
                totalRepeatQueCount: 0,//历史刷题量
                limitTimeCompleteTaskCount: 0,//今日完成任务
                totalCompleteTaskCount: 0,//历史完成任务
                totalTaskPercent: 0,//任务完成率
                totalTaskUserCount: 0,//任务总数
                totalRepeatPeopleCount: 0,//总刷题人数
                limitTimeRepeatPeopleCount: 0,//今日刷题人数
            },
            types: 1,
            gjloading: false,
            loading: true,
            loadingshow: false,
            sttableData: [],//刷题数据
            rwtableData: [],//任务数据
            repeatTops: [],//刷题榜
            taskTops: [],   //任务榜
            repeatStatistics: [],//近七天刷题数据
            name: [] as any,//刷题数量
            count: [] as any,//刷题日期
            sourceRepeatStatistics: [],//随机刷题和任务刷题
            sjname: [] as any,//刷题类型
            sjcount: [] as any,//刷题数量
            rwname: [] as any,
            rwcount: [] as any,
            type: '',//查询类型
            beginTime: '',//限制时间范围起止
            endTime: ''//限制时间范围起止
        })


        const event = {
            changesj(e: any) {
                data.loading = true
                if (data.time != null) {
                    //开始时间
                    var Kymd = event.dateFormat(data.time[0]) //年月日
                    //结束时间
                    var Jymd = event.dateFormat(data.time[1]) //年月日
                    console.log("开始时间", Kymd)
                    console.log("结束时间", Jymd)
                    event.getstdata(data.type, Kymd, Jymd);
                    event.getrwdata(data.type, Kymd, Jymd)
                } else {
                    event.getrwdata(data.type, data.beginTime = '', data.endTime = '')
                    event.getstdata(data.type, data.beginTime = '', data.endTime = '');
                }
            },
            //时间转换，时间转换 Wed Sep 16 2020 00:00:00 GMT+0800 (中国标准时间)
            dateFormat(tableData: any) {
                var date = new Date(tableData)
                var y = date.getFullYear()
                var m: any = date.getMonth() + 1
                m = m < 10 ? ('0' + m) : m
                var d: any = date.getDate()
                d = d < 10 ? ('0' + d) : d
                const time = y + '-' + m + '-' + d
                return time
            },
            //改变天数查询
            sjgb(val: any) {
                data.loading = true
                event.getstdata(data.type = val, data.beginTime, data.endTime);
                event.getrwdata(data.type = val, data.beginTime, data.endTime)
                console.log(111111111)
            },
            //刷题数据
            getstdata(type: any, beginTime: any, endTime: any) {
                GetLimitRepeatTop({
                    type: data.days,
                    beginTime: beginTime,
                    endTime: endTime
                }).then((res: any) => {
                    console.log('/////////', res)
                    if (res.result == 0) {
                        data.sttableData = res.data
                        data.loading = false
                    }
                })
            },
            //任务数据
            getrwdata(type: any, beginTime: any, endTime: any) {
                GetLimitTaskTop({
                    type: type,
                    beginTime: beginTime,
                    endTime: endTime
                }).then((res: any) => {
                    data.rwtableData = res.data
                    data.loading = false
                })
            },
            //统计数据
            getdata() {
                GetStatistics({
                    type: data.types
                }).then((res: any) => {
                    data.datas = res.data
                    //近七天刷题数据
                    res.data.repeatStatistics.forEach((item: any) => {
                        data.name.push(item.name)
                        data.count.push(item.count)
                    })
                    console.log('=========', data.name)
                    console.log('=========', data.count)
                    //随机刷题
                    res.data.sourceRepeatStatistics.forEach((item1: any) => {
                        data.sjname.push(item1.name)
                        data.sjcount.push(item1.count)
                    })
                    console.log('=========', data.sjname)
                    console.log('=========', data.sjcount)
                    //任务刷题
                    res.data.sourceRepeatStatistics.forEach((item2: any) => {
                        data.rwname.push(item2.name)
                        data.rwcount.push(item2.count)
                    })
                    console.log('=========', data.rwname)
                    console.log('=========', data.rwcount)
                    if (res.result == 0) {
                        console.log('----------', res)
                        data.loading = false
                    }
                    type EChartsOption = echarts.EChartsOption;
                    //折线图
                    var chartDomzx: any = document.getElementById('main');
                    var myChartzx = echarts.init(chartDomzx);
                    var option: EChartsOption
                    option = {
                        xAxis: {
                            type: 'category',
                            data: data.name
                        },
                        yAxis: {
                            type: 'value'
                        },
                        tooltip: {
                            trigger: 'axis',
                        },
                        series: [
                            {
                                data: data.count,
                                type: 'line'
                            }
                        ]
                    };

                    option && myChartzx.setOption(option);

                    var chartDombz = document.getElementById('main1')!;
                    var myChartbz = echarts.init(chartDombz);
                    var option: EChartsOption;

                    option = {
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            top: '5%',
                            left: 'center'
                        },
                        series: [
                            {
                                name: '任务来源',
                                type: 'pie',
                                radius: ['40%', '70%'],
                                avoidLabelOverlap: false,
                                itemStyle: {
                                    borderRadius: 10,
                                    borderColor: '#fff',
                                    borderWidth: 2
                                },
                                label: {
                                    show: false,
                                    position: 'center'
                                },
                                emphasis: {
                                    label: {
                                        show: true,
                                        fontSize: 40,
                                        fontWeight: 'bold'
                                    }
                                },
                                labelLine: {
                                    show: false
                                },
                                data: [
                                    { value: data.sjcount[0], name: data.sjname[0] },
                                    { value: data.rwcount[1], name: data.rwname[1] },
                                ]
                            }
                        ]
                    };

                    option && myChartbz.setOption(option);

                })
            },


        }
        return {
            ...toRefs(data),
            ...event,
        }
    },
})
</script>

<style scoped>
#k1 {
    height: 100%;
    margin-top: 0;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #eee;
}

.pageview {
    min-width: 1004px;
    text-align: center;
    background-color: #fff;
    border-radius: 10px;
    user-select: none;
    padding: 10px;
}

.cardtwodiv {
    height: 300px;
    width: 100%;
}

.cardtwodiv2 {
    height: 300px;
    width: 100%;
}


.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cardonw {
    width: 100%;
    transition: all 0.5s;
    color: #fff;
    background-color: #79bbff;
}

.cardonw2 {
    width: 100%;
    transition: all 0.5s;
    color: #fff;
    background-color: #e6a23c;
}

.cardonw3 {
    width: 100%;
    transition: all 0.5s;
    color: #fff;
    background-color: #f56c6c;
}

.cardonw4 {
    width: 100%;
    transition: all 0.5s;
    color: #fff;
    background-color: #67c23a
}

.xian {
    height: 1px;
    margin-top: 20px;
    text-align: left;
    border-top: 1px solid #e2e2e2;
}

.txt {
    position: relative;
    top: -12px;
    background: #fff;
    margin-left: 20px;
    font-size: 14px;
    color: #303133;
    font-weight: 500;
    padding: 0 20px;
}
</style>